<!--  -->
<template>
  <div>
    <my-header :showBack="true"  :title="$t('lang.forgotPassword')"  />
    <div class="forget_password">
      <ol>
        <li class="van-hairline--bottom">
          <div>
            <input type="text" v-model.trim="conNumber" :placeholder="$t('lang.youraccount')">
          </div>
        </li>
        <li class="van-hairline--bottom" v-show="accountType=='number'">
          <div class="idnumber">
            <input type="text" v-model.trim="conPhone"  :placeholder="exchPlaceTip">
            <div class="exchemail">
              <p  v-show="accountType=='number'" ><i class="iconfont icon-qiehuanzhanghao"></i><span @click="showIdword()">{{$t("lang.PhoneTel")}}</span></p>
            </div>
          </div>
        </li>
        <li class="van-hairline--bottom"  v-show="accountType=='email'">
          <div class="idnumber">
            <input type="text" v-model.trim="conPhone"  :placeholder="exchPlaceTip">
            <div class="exchemail">
              <p ><i class="iconfont icon-qiehuanzhanghao"></i><span @click="showIdword()">{{$t("lang.Umail")}}</span></p>
            </div>
          </div>
        </li>
        <li class="van-hairline--bottom" v-show="accountType=='number'">
          <div><input type="text" v-model.trim="code" :placeholder="$t('lang.InputPlaceholder')"></div>
          <em v-if="!sendDisabled" @click="getSmsCode">{{$t("lang.PhoneCode")}}</em>
          <em v-if="sendDisabled">{{time}}s</em>
        </li>
        <li class="van-hairline--bottom" v-show="accountType=='email'">
          <div><input type="email" v-model.trim="code" :placeholder="$t('lang.InputPlaceholder')"></div>
          <em v-if="!sendDisabled" @click="sendMail">{{$t("lang.UmailCode")}}</em>
          <em v-if="sendDisabled">{{time}}s</em>
        </li>
        <li class="van-hairline--bottom">
          <div>
            <input type="password" v-model.trim="password"  :placeholder="$t('lang.newPass')">
          </div>
        </li>
        <li class="van-hairline--bottom">
          <div>
            <input type="password" v-model.trim="confirmPassword"  :placeholder="$t('lang.ConfirmNewPass')">
          </div>
        </li>
      </ol>
      <div class="account_btn">
        <van-button type="primary" size="large" @click="retrieve">{{$t("lang.submitBtn")}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import header from "@/components/header";
export default {
  components: {
    "my-header": header
  },
  data () {
    return {
      conNumber:'',
      conPhone:"",
      conEmail:"",
      password:'',
      code:'',
      confirmPassword:'',

      time: 60, // 发送验证码倒计时
      sendDisabled: false,
      accountType:"number",
      exchPlaceTip:this.$t('lang.telPlaceholder'),
    };
  },
  mounted(){},

  methods: {
    // 切换
    showIdword(){
      if(this.accountType == 'number'){
        this.accountType = 'email';
        this.exchPlaceTip=this.$t('lang.putMailNum');
      }else{
        this.accountType = 'number';
        this.exchPlaceTip=this.$t('lang.telPlaceholder');
      }
    },
    //发送验证码
    getSmsCode() {
      if (this.$validator.isPhone(this.conPhone)) {
        this.$ajax(this.$api.getSmsCode, {phone: this.conPhone,smsType: 2})
          .then(res => {
            if (res.code == 0) {
              Toast({message: this.$t('lang.SendSmsTrueTip'),position: "bottom"});
              let vm = this;
              vm.sendDisabled = true;
              let interval = window.setInterval(function() {
                if ((vm.time--) <= 0) {
                  vm.time = 60;
                  vm.sendDisabled = false;
                  window.clearInterval(interval);
                }
              }, 1000);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        Toast({message: this.$t('lang.PhoneError'),position: "bottom"});
      }
    },
    //发送邮箱验证码POST /api/common/sendMail
    sendMail() {
      if (this.$validator.isEmail(this.conPhone)) {
        this.$ajax(this.$api.sendMail, {mailAddress: this.conPhone,mailType: 1})
          .then(res => {
            if (res.code == 0) {
              Toast({message:this.$t('lang.mailSendF'),position: "bottom"});
              let vm = this;
              vm.sendDisabled = true;
              let interval = window.setInterval(function() {
                if ((vm.time--) <= 0) {
                  vm.time = 60;
                  vm.sendDisabled = false;
                  window.clearInterval(interval);
                }
              }, 1000);
            }
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        Toast({message: this.$t('lang.checkMial'),position: "bottom"});
      }
    },
    retrieve() {
      if(!this.$validator.isPhone(this.conPhone)){
        Toast({message:this.$t('lang.ErrPhone'),position: "bottom"});
        return;
      }
      if(this.conNumber==""){
        Toast({message: this.$t('lang.userNameErr'),position: "bottom"});
        return;
      }
      if(!this.code){
        Toast({message: this.$t('lang.SMnCodeE'),position: "bottom"});
        return;
      }
      if(!this.$validator.isPassword(this.password)){
        Toast({message: this.$t('lang.newPass'),position: "bottom"});
        return;
      }else if(this.password!=this.confirmPassword){
        Toast({message: this.$t('lang.TwoPassErr'),position: "bottom"});
        return;
      }
      this.$ajax(this.$api.forgetPass, {
        phone: this.conPhone,
        customerNumber:this.conNumber,
        code: this.code,
        password: this.password
      })
      .then(res => {
        if (res.code == 0) {
          Toast({message:this.$t('lang.CZsuccessful'),position: "bottom"});
          this.$router.replace("/login");   
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
.forget_password {
  background: #fff;
  ol {
    padding: 0 10px;
    li {
      padding: 15px 0 8px;
      display: flex;
      div {
        flex: 1;
        input {
          border: none;
          line-height: 20px;
          width: 100%;
          margin: 5px;
          box-sizing: border-box;
          color: #666;
          background: transparent;
        }
      }
      em {
        flex: 1;
        line-height: 30px;
        max-width: 80px;
        color: #3653d5;
        text-align: center;
      }
    }
  }
  .account_btn {
    margin-top: 30px;
    padding: 0 10px;
  }
}
  // 账号切换
  .idnumber{display: flex;}
.forget_password .exchemail{border: 1px solid #999999; }  
.forget_password  .exchemail  p{color: #999999;font-size: 14px;width:80px!important;line-height: 30px;height: 30px;}
.forget_password  .exchemail i{font-size: 15px!important;padding: 0 5px}
.forget_password  .exchemail span{font-size: 14px!important;line-height: 20px;height: 20px;}
</style>